<template>
	<header class="header">
		<h1>todos</h1>
		<input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
		<label for="toggle-all"></label>
		<input class="new-todo" placeholder="输入任务名称-回车确认" autofocus 
			v-model.trim="content" 
			@keyup.enter="enter"
		/>
	</header>
</template>

<script>
	export default {

		props: ["arr"],

		data () {
			return {
				content: ""
			}
		},
		methods: {
			enter() {
				if(this.content.length === 0) return alert("请输入内容")

				this.$emit("enter", this.content)
				this.content = ""
			}
		},
		computed: {
			isAll:{
				get(){
				 	return	this.arr.every(item => item.isDone)
				},
				set(val){
					return this.arr.forEach(item => item.isDone = val)
				}
			}
		}


	}
</script>
